<template>
  <section class="daily">
    <img class="title" src="@/assets/images/home/day.jpg"/>
    <ul class="box">
      <router-link
        tag="li"
        v-for="item of daily.dailyList"
        :key="item.id"
        :to="'/footer/home/dailycontent/' + item.id"
      >
        <p class="name">{{item.name}}</p>
        <p class="title">{{item.title}}</p>
        <img :src="item.imgUrl" alt=""/>
      </router-link>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'DailyShopping',
  props: ['daily']
}
</script>

<style lang="stylus" scoped>
  .daily
    .title
      width 100%
    .box
      margin: 0 10px 10px
      background #ffffff
      box-sizing border-box
      display flex
      flex-wrap wrap
      flex-direction row
      align-content stretch
      overflow hidden
      text-align center
      li
        width 24.7%
        padding 8px 0
        border-left 1px solid #f6f6f6
        border-bottom 1px solid #f6f6f6
        .name
          font-size 16px
          color transparent // 与 -webkit-background-clip text 配合使用
        .title
          font-size 12px
          color #222222
          margin 5px  0 6px
        img
          width 60px
      li:nth-child(1)
        border-left none
      li:nth-child(5)
        border-left none
      li:nth-child(1) .name
        background -webkit-linear-gradient(left, #FF2A2A, #F139D2)
        background linear-gradient(90deg, #FF2A2A, #F139D2)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(2) .name
        background -webkit-linear-gradient(left,#FE8537,#F02B2B)
        background linear-gradient(90deg, #FE8537,#F02B2B)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(3) .name
        background -webkit-linear-gradient(left,#FF765C,#FF23B3)
        background linear-gradient(90deg, #FF765C,#FF23B3)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(4) .name
        background -webkit-linear-gradient(left,#FF2A00,#FF00AF)
        background linear-gradient(90deg, #FF2A00,#FF00AF)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(5) .name
        background -webkit-linear-gradient(left,#D400FF,#FF320A)
        background linear-gradient(90deg, #D400FF,#FF320A)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(6) .name
        background -webkit-linear-gradient(left,#00C2AB,#3E94FF)
        background linear-gradient(90deg, #00C2AB,#3E94FF)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(7) .name
        background -webkit-linear-gradient(left,#FF765C,#FF23B3)
        background linear-gradient(90deg, #FF765C,#FF23B3)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
      li:nth-child(8) .name
        background -webkit-linear-gradient(left,#2AD396,#85BB1F)
        background linear-gradient(90deg, #2AD396,#85BB1F)
        -webkit-background-clip text // 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
</style>
